<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ECharts</title>
  <!-- 引入 echarts.js -->
  <script src="../js/modules/echarts.js"></script>
  <style>
    body {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: baseline;
    }
    #main_t{
      margin-top: 100px;
    }
  </style>
</head>

<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 500px;height:240px;"></div>
  <div id="main_o" style="width: 500px;height:240px;"></div>
  <div id="main_t" style="width: 100%;height:240px;"></div>

  <script type="text/javascript">
    // import * as echarts from 'echarts';

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '文章访问数据',
        // subtext: '纯属虚构',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [{
        name: '访问来源',
        type: 'pie',
        radius: '60%',
        data: [{
            value: 10015,
            name: '总文章数'
          },
          {
            value: 123,
            name: '日新增文章数'
          },
          {
            value: 35,
            name: '评论总数'
          },
          {
            value: 123,
            name: '日新增评论数'
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    };

    option && myChart.setOption(option);
  </script>
  <script type="text/javascript">
    var chartDom = document.getElementById('main_o');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '月新增文章数',
        // subtext: '数据来自网络'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['2019年', '2020年']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['2019年1月', '2019年5月', '2019年9月', '2020年1月', '2020年5月', '2020年12月']
      },
      series: [{
          name: '2019年',
          type: 'bar',
          data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
          name: '2020年',
          type: 'bar',
          data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
      ]
    };

    option && myChart.setOption(option);
  </script>
  <script type="text/javascript">
    var chartDom = document.getElementById('main_t');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        left: 'center',
        data: ['奇趣事', '会生活', '爱旅行', '趣美味']
      },
      radar: [{
          indicator: [{
              text: '奇趣事',
              max: 100
            },
            {
              text: '会生活',
              max: 100
            },
            {
              text: '爱旅行',
              max: 100
            },
            {
              text: '趣美味',
              max: 100
            }
          ],
          center: ['25%', '40%'],
          radius: 80
        },
        {
          indicator: [{
              text: '奇趣事',
              max: 100
            },
            {
              text: '会生活',
              max: 100
            },
            {
              text: '爱旅行',
              max: 100
            },
            {
              text: '趣美味',
              max: 100
            }
          ],
          radius: 80,
          center: ['50%', '60%'],
        },
        {
          indicator: (function () {
            var res = [];
            for (var i = 1; i <= 12; i++) {
              res.push({
                text: i + '月',
                max: 100
              });
            }
            return res;
          })(),
          center: ['75%', '40%'],
          radius: 80
        }
      ],
      series: [{
          type: 'radar',
          tooltip: {
            trigger: 'item'
          },
          areaStyle: {},
          data: [{
            value: [60, 73, 85, 40],
            name: '某软件'
          }]
        },
        {
          type: 'radar',
          radarIndex: 1,
          areaStyle: {},
          data: [{
              value: [85, 90, 90, 95, 95],
              name: '某主食手机'
            },
            {
              value: [95, 80, 95, 90, 93],
              name: '某水果手机'
            }
          ]
        },
        {
          type: 'radar',
          radarIndex: 2,
          areaStyle: {},
          data: [{
              name: '降水量',
              value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3],
            },
            {
              name: '蒸发量',
              value: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]
            }
          ]
        }
      ]
    };

    option && myChart.setOption(option);
  </script>
</body>

</html>